import { React, useState, useEffect } from 'react'
import Tabber from '../copmonets/Tabber'
import { ErrorBlock, Toast, Modal, Rate } from 'antd-mobile'
import './order.css'
import _ from 'lodash'
import { getInfo, confirmOrderTwo, orderList } from '../request/api'
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";


export default function Order() {
    const { t, i18n } = useTranslation();
    const navigate = useNavigate();
    const throttle = _.throttle;
    const [noData, setNoData] = useState(false)
    const [active, setActive] = useState(-1)
    const [data, setData] = useState([])
    const [orderMoney, setOrderMoney] = useState()
    const getMoney = async () => {
        const val = await getInfo({})
        if (val.data.freeze_gec != '') {
            setOrderMoney((Number(val.data.balances) - Number(val.data.freeze_gec)).toFixed(2))
        } else {
            setOrderMoney(val.data.balances)
        }
    }
    const getData1 = async (i) => {
        Toast.show({
            icon: 'loading',
            content: t('t4'),
            duration: 1000,
        })
        const res = await orderList({ status: i, page: 1, num: 999})
        let data = res.data.data
        if (data.length == 0) {
            setNoData(true)
        } else {
            setNoData(false)
            setData(data)
        }
    }
    const Tab = throttle((i) => {
        setData([])
        setNoData(false)
        setActive(i)
        getData1(i)
    }, 1500, { 'trailing': false })
    let star = 0
    const starChange = (v)=>{
        star = v
    }
    const submitOrder = throttle(() => {
            /*if (star < 4){
                return Toast.show({
                    icon: 'fail',
                    content: t('t6'),
                })
            }*/
            Toast.show({
                icon: 'loading',
                content: t('t4'),
            })
            confirmOrderTwo({ id: data[0].id }).then(res => {
                if (res.code == 0){
                    Toast.show({
                        icon: 'success',
                        content: t('t7'),
                    })
                    setTimeout(() => {
                        window.location.reload()
                    }, 1000);
                }else {
                    Toast.show({
                        icon: 'fail',
                        content: res.info,
                    })
                }
            })
    }, 1500, { 'trailing': false })
    useEffect(() => {
        getMoney()
        getData1(-1)
    }, [])
    return (
        <div className='order'>
            <div className='header'>{t('n2')}</div>
            <div className='order_tab'>
                <p className={active == -1 ? 'order_complete' : 'order_undone'} onClick={() => { Tab(-1) }}>{t('d1')}</p>
                <p className={active == 1 ? 'order_complete' : 'order_undone'} onClick={() => { Tab(1) }}>{t('d2')}</p>
            </div>
            <div className='order_card1'>
                {noData && <ErrorBlock
                    title={t('d3')}
                    image='./assets/index/empty.svg'
                    style={{
                        '--image-height': '150px',
                    }}
                    description={<span></span>}
                >
                </ErrorBlock>}
                <div className='dataList_order'>
                    {
                        active == -1 && data[0]?.goods_name && <div className='order_list' onClick={() => {
                            Modal.show({
                                showCloseButton: true,
                                content: (
                                    <div>
                                        <div className='order_window'>
                                            <div>
                                                <div className='card_tops'>
                                                    <img src={data[0].goods_pic} alt="" />
                                                    <div className='list_texts' style={{ margin: '0 0 0 10px' }}>
                                                        <p>{data[0].goods_name}</p>
                                                        <div>
                                                            <p>{data[0].goods_price}</p>
                                                            <p>X{data[0].numb}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className='card_down'>
                                                    <div>
                                                        <p>{t('d6')}</p>
                                                        <p>{+((data[0].goods_price * data[0].numb).toFixed(2))}</p>
                                                    </div>
                                                    <div>
                                                    <p>{t('d8')}</p>
                                                        <p style={{ color: '#ff5353' }}>{data[0].commission}</p>
                                                    </div>
                                                    <div>
                                                        <p>{t('d9')}</p>
                                                        <p>{data[0].need_money}</p>
                                                    </div>
                                                    <div>
                                                        <p>{t('d7')}</p>
                                                        <p>{data[0].deal_count}</p>
                                                    </div>
                                                    <div>
                                                        <p>{t('d5')}</p>
                                                        <p>{data[0].addtime}</p>
                                                    </div>
                                                </div>
                                            </div>
                                            {<div className='capital_evaluate'>
                                                <p>{t('d10')}</p>
                                                <Rate style={{
                                                    '--star-size': '22px',
                                                    '--active-color': '#ff0000',
                                                }} onChange={(val) => { starChange(val) }} />
                                            </div>}
                                        </div>
                                        <div className='pop_but' onClick={() => { submitOrder() }}>
                                            <p>{t('ty3')}</p>
                                        </div>
                                    </div>
                                ),
                            })
                        }}>
                            <div className='card_tops'>
                                <img src={data[0].goods_pic} alt="" />
                                <div className='list_texts'>
                                    <p>{data[0].goods_name}</p>
                                    <div>
                                        <p>{data[0].goods_price}</p>
                                        <p>X{data[0].numb}</p>
                                    </div>
                                </div>
                            </div>
                            <div className='card_down'>
                                <div>
                                    <p>{t('d5')}</p>
                                    <p>{data[0].addtime}</p>
                                </div>
                                <div>
                                    <p>{t('d6')}</p>
                                    <p>{+((data[0].goods_price * data[0].numb).toFixed(2))}</p>
                                </div>
                                <div>
                                    <p>{t('d9')}</p>
                                    <p>{data[0].need_money}</p>
                                </div>
                                {<div>
                                    <p>{t('d7')}</p>
                                    <p>{data[0].deal_count}</p>
                                </div>}
                                <div>
                                    <p>{t('d8')}</p>
                                    <p style={{ color: '#ff5353' }}>{data[0].commission}</p>
                                </div>
                                <p style={{ color: 'red', textAlign: 'end' }}>{t('d1')}</p>
                            </div>
                        </div>
                    }
                    {
                        active === 1 && data.map((item, index) => {
                            return (
                                <div className='order_list' key={index}>
                                    <div className='card_tops'>
                                        <img src={item.goods_pic} alt="" />
                                        <div className='list_texts'>
                                            <p>{item.goods_name}</p>
                                            <div>
                                                <p>{item.goods_price}</p>
                                                <p>X{item.numb}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div className='card_down'>
                                        <div>
                                            <p>{t('d4')}</p>
                                            <p>{item.id}</p>
                                        </div>
                                        <div>
                                            <p>{t('d5')}</p>
                                            <p>{item.addtime}</p>
                                        </div>
                                        <div>
                                            <p>{t('d6')}</p>
                                            <p>{+((item.goods_price * item.numb).toFixed(2))}</p>
                                        </div>
                                        {<div>
                                            <p>{t('d7')}</p>
                                            <p>{item.deal_count}</p>
                                        </div>}
                                        <div>
                                            <p>{t('d8')}</p>
                                            <p style={{ color: '#ff5353' }}>{item.commission}</p>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
            <Tabber></Tabber>
        </div>
    )
}
